{% extends 'login/base.html' %}
{% block index %}
    <div style="margin: 20px 20px 0px 20px;">
        <ul class="nav nav-tabs justify-content-center" style="background-color: white;opacity: 0.8;font-size: 20px">
            <li class="nav-item">
                <a class="nav-link disabled" aria-current="page" href="#">新闻类:</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" aria-current="page" href="/news/1">最新</a>
            </li>
            {% for i in type %}
                <li class="nav-item ">
                    <a class="nav-link " aria-current="page" href="/news/1?kw={{ i.id }}">{{ i.type }}</a>
                </li>
            {% endfor %}
        </ul>


        {#            新闻#}

        {% for i in news %}
            <div class="card mb-3" style="opacity: 0.8;padding: 10px;margin: 10px 0px 10px 0px">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="/media/{{ i.photo }}" class=" rounded-start" height="220px" width="400px"
                             alt="{{ i.photo }}">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title"><a style="text-decoration: none;color: black"
                                                      href="{% url 'user_index' i.id %}">&emsp;{{ i.title }}</a></h5>
                            <p class="card-text"></p>
                            <p class="">
                                <small class="text-muted">主要内容：{{ i.content | slice:":100" }}。。。</small><br>
                                <small class="text-muted">发布时间：{{ i.title }}</small><br>
                                <small class="text-muted">访问数量：{{ i.traffic }}</small><br>
                                <small class="text-muted">类型：{{ i.type.type }}</small>
                            </p>

                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        <div style="opacity: 0.8">
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end">
                    <li class="page-item {% if i == 0 %} disabled {% endif %} ">
                        <a class="page-link " href="{{ pIndex|add:-1 }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% for i in plist %}
                        <li class="page-item {% if i == pIndex %} active {% endif %}"><a class="page-link"
                                                                                         href="/news/{{ i }}">{{ i }}</a>
                        </li>
                    {% endfor %}
                    <li class="page-item {% if i == max_pages %} disabled {% endif %}">
                        <a class="page-link " href="{{ pIndex|add:+1 }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

{% endblock %}
{% block href %}
    <ul class="nav flex-column">
        {% for i in href %}
            <li class="nav-item mb-2"><a href="{{ i.href }}" class="nav-link p-0 text-muted">{{ i.title }}</a></li>
        {% endfor %}
    </ul>
{% endblock %}
{% block myhref %}
    <ul class="nav flex-column">
        {% for i in myhref %}
            <li class="nav-item mb-2">
                <img src="/media/{{ i.photo }}" width="40px" height="40px" alt="">
                <a href="#" class="nav-link p-0 text-muted">{{ i.title }}</a>
            </li>
        {% endfor %}


    </ul>
{% endblock %}
{% block Admiration %}
    <p>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-balloon-heart"
             viewBox="0 0 16 16">
            <path fill-rule="evenodd"
                  d="m8 2.42-.717-.737c-1.13-1.161-3.243-.777-4.01.72-.35.685-.451 1.707.236 3.062C4.16 6.753 5.52 8.32 8 10.042c2.479-1.723 3.839-3.29 4.491-4.577.687-1.355.587-2.377.236-3.061-.767-1.498-2.88-1.882-4.01-.721L8 2.42Zm-.49 8.5c-10.78-7.44-3-13.155.359-10.063.045.041.089.084.132.129.043-.045.087-.088.132-.129 3.36-3.092 11.137 2.624.357 10.063l.235.468a.25.25 0 1 1-.448.224l-.008-.017c.008.11.02.202.037.29.054.27.161.488.419 1.003.288.578.235 1.15.076 1.629-.157.469-.422.867-.588 1.115l-.004.007a.25.25 0 1 1-.416-.278c.168-.252.4-.6.533-1.003.133-.396.163-.824-.049-1.246l-.013-.028c-.24-.48-.38-.758-.448-1.102a3.177 3.177 0 0 1-.052-.45l-.04.08a.25.25 0 1 1-.447-.224l.235-.468ZM6.013 2.06c-.649-.18-1.483.083-1.85.798-.131.258-.245.689-.08 1.335.063.244.414.198.487-.043.21-.697.627-1.447 1.359-1.692.217-.073.304-.337.084-.398Z"/>
        </svg>
        咖啡续命
    </p>
    {% for i in admiration %}

        <div class="card">
            <img src="/media/{{ i.photo }}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">{{ i.title }}</h5>
            </div>
        </div>
    {% endfor %}
{% endblock %}